<template>
  <yd-layout class="m-login">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-login-ct">
      <div class="logo"></div>
      <div class="login-bd">
        <yd-cell-group>
          <yd-cell-item>
            <yd-input slot="right"
              type="text" 
              v-model="userName" 
              placeholder="手机号"
              :required="true"
              regex="mobile"
              ref="loginInput"
              :showClearIcon="false"
              :showErrorIcon="false"
              :showSuccessIcon="false"
              :showRequiredIcon="false">
            </yd-input>
          </yd-cell-item>
          <yd-cell-item>
            <yd-input slot="right"
              type="password" 
              v-model="password" 
              placeholder="密码"
              :required="true"
              regex="^\w{6,16}$"
              ref="loginInput"
              :showClearIcon="false"
              :showErrorIcon="false"
              :showSuccessIcon="false"
              :showRequiredIcon="false">
            </yd-input>
          </yd-cell-item>
        </yd-cell-group>

        <yd-cell-item>
          <div slot="left" @click="remember()"><span :class="isMember"></span>记住密码</div>
          <router-link slot="right" to="/forget">忘记密码</router-link>
        </yd-cell-item>

        <yd-button size="large" @click.native="onSubmit">登陆</yd-button>
        <router-link class="yd-btn-block" to="/register">注册</router-link>

      </div>
    </div>
  </yd-layout>
</template>

<script>
  import Md5 from 'js-md5'
  import { session } from 'util/storage'
  import { apiLogin } from 'js/api'

  export default {
    data() {
      return {
        userName: '',
        password: '',
        isMember: 'ub-se-img'
      }
    },
    created() {
      this.userName = localStorage.getItem('userName')
      if (localStorage.getItem('password')) {
        this.password = localStorage.getItem('password')
      }
      console.log(localStorage.getItem('userName'), 999999)
      console.log(localStorage.getItem('password'), 888)
    },
    methods: {
      // 记住密码
      remember() {
        if (this.isMember === 'ub-img') {
          this.isMember = 'ub-se-img'
        } else {
          this.isMember = 'ub-img'
        }
      },
      // 登陆
      onSubmit() {
        const oInput = this.$refs.loginInput
        if (oInput.errorMsg) {
          this.$toast(oInput.errorMsg, () => {
            oInput.$el.children[0].focus()
          })
          return
        }
        // 成功
        apiLogin(this.userName, Md5(this.password)).then(data => {
          if (this.isMember === 'ub-se-img') {
            localStorage.setItem('password', this.password)
          }
          localStorage.setItem('userName', this.userName)
          session.set('userName', this.mobile)
          this.$toast('登录成功', () => {
            this.$store.commit('setUserInfo', data)
            const redirect = decodeURIComponent(this.$route.query.redirect)
            if (redirect) {
              this.$router.replace(redirect)
            } else {
              this.$router.replace('/')
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-login {
    a {
      font-size: .26rem;
      color: #666;
    }
  }
  .m-login-ct {
    position: relative;
    height: 100%;
    padding: .2rem 0;
    // background: url(./img/pg.jpg) no-repeat center center;
    background-size: cover;
    .ub-img {
      display: inline-block;
      margin-right: 2px;
      height: 0.3rem;
      width: 0.3rem;
      background: url(../../assets/btn_marquee.png) no-repeat center center;
      background-size: 100%;
    }
    .ub-se-img {
      display: inline-block;
      margin-right: 2px;
      height: 0.3rem;
      width: 0.3rem;
      background: url(../../assets/btn_marquee_hl.png) no-repeat center center;
      background-size: 100%;
    }
    .logo {
      height: 1rem;
      margin: 1.1rem 0;
      // background: url(../../assets/logo.png) no-repeat center center;
      background-size: 2.6rem 100%;
    }
    .login-bd {
      position: absolute;
      left: .2rem;
      right: .2rem;
      top: 50%;
      transform: translateY(-50%);
      padding: .2rem .7rem;
      background: #fff;
      .forget {
        line-height: .8rem;
        text-align: right;
        font-size: .22rem;
        color: #666;
      }
    }
  }
</style>